<template>
  <div class="goods" @click="goodsDateil(goods.id)">
    <i v-if="goods.sell_volume > 5000">热销</i>
    <img mode="aspectFit" :src="goods.list_pic_url">
    <div class="text">
      <p>{{goods.name}}</p>
      <span>￥{{goods.retail_price}}</span>
      <span>销量：{{goods.sell_volume}}</span>
    </div>
  </div>
</template>

<script>

export default {
  props: ['goods'],
  methods: {
    goodsDateil (id) {
      wx.navigateTo({
        url: `/pages/goodsDateil/main?id=${id}`
      })
    }
  }
}
</script>

<style lang="less" scoped>
.goods{
    width: calc(50% - 40rpx);
    display: inline-block;
    padding: 15rpx;
    margin: 7rpx;
    background-color: white;
    position: relative;
    &:nth-child(1),&:nth-child(1){
      margin-top: 10rpx;
    }
  i{
    width: 80rpx;
    height: 40rpx;
    position: absolute;
    right: 0;
    top: 15rpx;
    color: #b4282d;
  }
  img{
    width: 100%;
    height: 340rpx;
  }
  p{
    height: 50rpx;
    font-size: 28rpx;
    line-height: 50rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
  }
  span{
    color: #b4282d;
    display: inline-block;
    height: 30rpx;
    line-height: 30rpx;
    font-size: 30rpx;
    &:last-of-type{
      float: right;
      font-size: 24rpx;
      line-height: 36rpx;
    }
  }
}
</style>
